<template>
  <div>
    <!--  -->
    <!-- 内容写到同级custom文件即可看到效果 -->
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <div class="head">
          <div class="saleOrder gradient-one mr16">
            <div class="title-content">
              <div class="title">销售采单</div>
              <!-- <div class="more">了解更多</div> -->
            </div>
            <div class="sub-title">
              <span class="explain">销售人员的专属招生工具</span>

              <a-tooltip>
                <template slot="title"
                  >在线下地推、线上招生的过程中，销售人员通过专属招生二维码高效录入学员信息，让业绩核算一目了然。</template
                >
                <a-icon type="question-circle" style="color: hsla(0, 0%, 100%, 0.5)" />
              </a-tooltip>
            </div>
            <div class="create-form">
              <div class="create-btn" @click="saleVisible = true">立即创建</div>
              <div class="create-icon bg-img-one"></div>
            </div>
          </div>
          <div class="saleOrder gradient-two mr16">
            <div class="title-content">
              <div class="title">课后活动报名</div>
              <!-- <div class="more">了解更多</div> -->
            </div>
            <div class="sub-title">
              <span class="explain">课后活动高效报名工具</span>
              <a-tooltip>
                <template slot="title"
                  >邀请家长参与线下活动，不管是周年庆、万圣节还是各种小活动，一份表单即可收集你想要的全部信息。</template
                >
                <a-icon type="question-circle" style="color: hsla(0, 0%, 100%, 0.5)" />
              </a-tooltip>
            </div>
            <div class="create-form">
              <div class="create-btn" @click="activeVisible = true">立即创建</div>
              <div class="create-icon bg-img-two"></div>
            </div>
          </div>
          <div class="saleOrder gradient-three mr16">
            <div class="title-content">
              <div class="title">问卷调查</div>
              <!-- <div class="more">了解更多</div> -->
            </div>
            <div class="sub-title">
              <span class="explain">家长满意度调查工具</span>

              <a-tooltip>
                <template slot="title"
                  >适用于各类课程/服务的满意度调查，通过问卷的形式帮助机构及时掌握家长的意见反馈。</template
                >
                <a-icon type="question-circle" style="color: hsla(0, 0%, 100%, 0.5)" />
              </a-tooltip>
            </div>
            <div class="create-form">
              <div class="create-btn" @click="investigationVisible = true">立即创建</div>
              <div class="create-icon bg-img-three"></div>
            </div>
          </div>
          <div class="more">
            <div style="font-size: 15px; font-weight: 500">更多类型</div>
            <div style="font-size: 12px; color: #666; color: #666; margin-top: 3px">敬请期待</div>
          </div>
        </div>
        <div class="search mt16">
          <!-- <a-form layout="inline">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item label="表单名称">
                <a-input-search placeholder="请输入表单名称" style="width:300px;" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="类型">
                <a-select placeholder="请选择类型" style="width:300px;"></a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="状态">
                <a-select placeholder="请选择状态" style="width:300px;"></a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>-->
          <span>表单名称：</span>
          <a-input-search
            placeholder="请输入表单名称"
            style="width: 20%; margin-right: 3%"
            v-model="searchParams.name"
          />
          <span>类型：</span>
          <a-select
            placeholder="请选择类型"
            style="width: 20%; margin-right: 3%"
            v-model="searchParams.type"
            allowClear
          >
            <a-select-option :value="1">销售采单</a-select-option>
            <a-select-option :value="2">课后活动报名</a-select-option>
            <a-select-option :value="3">问卷调查</a-select-option>
          </a-select>
          <span>状态：</span>
          <a-select
            placeholder="请选择状态"
            style="width: 20%; margin-right: 3%"
            v-model="searchParams.status"
            allowClear
          >
            <a-select-option :value="1">未发布</a-select-option>
            <a-select-option :value="2">收集中</a-select-option>
            <a-select-option :value="3">已失效</a-select-option>
          </a-select>
        </div>
        <div class="form-list">
          <div class="form-item mt16" v-for="(item, index) in activeList" :key="index">
            <div class="one-part">
              <div class="eform-title">
                <a-tag color="#3BBDAA" v-if="item.status == 1">未发布</a-tag>
                <a-tag color="#58B7EF" v-if="item.status == 2">收集中</a-tag>
                <a-tag color="#CCCCCC" v-if="item.status == 3">已失效</a-tag>
                <span class="eform-title-show">{{ item.name }}</span>
              </div>
              <div class="eform-operate">
                <!-- 收集中 -->
                <a-tooltip v-if="item.status == 2" @click="openExten(item)">
                  <template slot="title">推广</template>
                  <span class="iconfont icon-ico ml16" style="cursor: pointer"></span>
                </a-tooltip>
                <a-tooltip v-if="item.status == 2" @click="release(item.id, 3)">
                  <template slot="title">转为失效</template>
                  <span class="iconfont icon-solid-time ml16" style="cursor: pointer"></span>
                </a-tooltip>

                <a-tooltip v-if="item.status == 1" @click="clickEdit(item.id)">
                  <template slot="title">编辑</template>
                  <span class="iconfont icon-icon_edit ml16" style="cursor: pointer"></span>
                </a-tooltip>
                <a-tooltip @click="delteItem(item)">
                  <template slot="title">删除</template>
                  <span class="iconfont icon-shanchu ml16" style="cursor: pointer"></span>
                </a-tooltip>
                <a-tooltip @click="copyList(item)">
                  <template slot="title">复制</template>
                  <span class="iconfont icon-fuzhi ml16" style="cursor: pointer"></span>
                </a-tooltip>
              </div>
            </div>
            <div class="two-part">
              <div class="left-box">
                <div style="margin-top: 23px">
                  类型：{{
                    item.type == 1 ? '销售采单' : item.type == 2 ? '课后活动报名' : item.type == 3 ? '问卷调查' : '未知'
                  }}
                </div>
                <div style="margin-top: 8px">创建时间：{{ item.created_at }}</div>
              </div>
              <!-- 未发布 -->
              <div style="margin-left: auto; margin-top: auto" v-if="item.status == 1">
                <a-button type="primary" @click="release(item.id, 2)">发布</a-button>
              </div>
              <!-- 已发布 已失效 -->
              <div class="right-box" v-if="item.status == 2 || item.status == 3">
                <div class="data">
                  <div class="data-total">
                    <div class="count">{{ item.look_num }}</div>
                    <div class="text">浏览数</div>
                  </div>
                  <div class="data-total">
                    <div class="count">{{ item.submit_num }}</div>
                    <div class="text">提交量</div>
                  </div>
                  <div class="data-total">
                    <div class="icon" @click="lookData(item)">
                      <span class="iconfont icon-shuju" style="font-size: 18px; color: #fdb894; cursor: pointer"></span>
                    </div>
                    <div class="text">数据详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="pagination"
          style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center"
        >
          <div>共{{ pagination.total }}条数据</div>
          <a-pagination v-model="nowPage" :total="pagination.total" @change="changePages" />
        </div>
      </a-card>
    </a-spin>
    <!-- 销售采单弹窗 -->
    <a-modal title="请选择模板" :visible="saleVisible" @cancel="saleVisible = false" :footer="null" :width="680">
      <div class="eform-template-box">
        <div class="left-block">
          <div class="left-box" @click="create('1')">
            <a-icon type="plus" style="font-size: 30px; color: #bfbfbf" />
          </div>
          <div class="create-text">空白创建</div>
        </div>
        <div class="right-block">
          <div class="right-box">
            <img src="~@/assets/img/form/audition.png" style="width: 100%; height: 100%; border-radius: 4px" />
            <div class="Mantle">
              <a-button
                type="primary"
                style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120%)"
                @click="getAudition(1, 1)"
                >立即使用</a-button
              >
              <a-button class="mt16" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -22%)"
              @click="lookPreview(1,1)"
                >预览模板</a-button
              >
            </div>
          </div>

          <div class="template-text">试听课预约</div>
        </div>
        <div class="right-block">
          <div class="right-box">
            <img src="~@/assets/img/form/active.png" style="width: 100%; height: 100%; border-radius: 4px" />
            <div class="Mantle">
              <a-button
                type="primary"
                style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120%)"
                @click="getAudition(1, 2)"
                >立即使用</a-button
              >
              <a-button class="mt16" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -22%)"
              @click="lookPreview(1,2)"
                >预览模板</a-button
              >
            </div>
          </div>

          <div class="template-text">开业/店庆活动</div>
        </div>
      </div>
    </a-modal>
    <!-- 课后活动报名弹窗 -->
    <a-modal title="请选择模板" :visible="activeVisible" @cancel="activeVisible = false" :footer="null" :width="680">
      <div class="eform-template-box">
        <div class="left-block">
          <div class="left-box" @click="create('2')">
            <a-icon type="plus" style="font-size: 30px; color: #bfbfbf" />
          </div>
          <div class="create-text">空白创建</div>
        </div>
        <div class="right-block">
          <div class="right-box">
            <img src="~@/assets/img/form/celebration.png" style="width: 100%; height: 100%; border-radius: 4px" />
            <div class="Mantle">
              <a-button
                type="primary"
                style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120%)"
                @click="getAudition(2, 1)"
                >立即使用</a-button
              >
              <a-button class="mt16" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -22%)"
               @click="lookPreview(2,1)"
                >预览模板</a-button
              >
            </div>
          </div>

          <div class="template-text">周年庆典晚会邀请函</div>
        </div>
        <div class="right-block">
          <div class="right-box">
            <img src="~@/assets/img/form/festival.png" style="width: 100%; height: 100%; border-radius: 4px" />
            <div class="Mantle">
              <a-button
                type="primary"
                style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120%)"
                @click="getAudition(2, 2)"
                >立即使用</a-button
              >
              <a-button class="mt16" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -22%)"
              @click="lookPreview(2,2)"
                >预览模板</a-button
              >
            </div>
          </div>

          <div class="template-text">节日活动邀请函</div>
        </div>
      </div>
    </a-modal>
    <!-- 问卷调查弹窗 -->
    <a-modal
      title="请选择模板"
      :visible="investigationVisible"
      @cancel="investigationVisible = false"
      :footer="null"
      :width="680"
    >
      <div class="eform-template-box">
        <div class="left-block">
          <div class="left-box" @click="create('3')">
            <a-icon type="plus" style="font-size: 30px; color: #bfbfbf" />
          </div>
          <div class="create-text">空白创建</div>
        </div>
        <div class="right-block">
          <div class="right-box">
            <img src="~@/assets/img/form/course.png" style="width: 100%; height: 100%; border-radius: 4px" />
            <div class="Mantle">
              <a-button
                type="primary"
                style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120%)"
                @click="getAudition(3, 1)"
                >立即使用</a-button
              >
              <a-button class="mt16" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -22%)"
               @click="lookPreview(3,1)"
                >预览模板</a-button
              >
            </div>
          </div>

          <div class="template-text">课程满意度调查</div>
        </div>
        <div class="right-block">
          <div class="right-box">
            <img src="~@/assets/img/form/studentInfo.png" style="width: 100%; height: 100%; border-radius: 4px" />
            <div class="Mantle">
              <a-button
                type="primary"
                style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -120%)"
                @click="getAudition(3, 2)"
                >立即使用</a-button
              >
              <a-button class="mt16" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -22%)"
              @click="lookPreview(3,2)"
                >预览模板</a-button
              >
            </div>
          </div>

          <div class="template-text">学员基本信息调研</div>
        </div>
      </div>
    </a-modal>
    <!-- 创建空白表单 -->
    <a-modal
      title="创建空白表单"
      :visible="blankVisible"
      :confirm-loading="blankConfirmLoading"
      @ok="createBlank"
      @cancel="blankVisible = false"
      okText="立即创建"
    >
      <div class="form-box">
        <span>表单名称：</span>
        <a-input placeholder="请输入表单名称" style="width: 250px" v-model="formName" />
      </div>
    </a-modal>
    <!-- 推广 -->
    <a-modal
      title="推广"
      :visible="extensionVisible"
      @cancel="extensionVisible = false"
      :footer="null"
      :width="680"
      :bodyStyle="{ 'max-height': '70vh', 'overflow-y': 'auto' }"
    >
      <!-- maxeight:'70vh','overflow-y':auto -->
      <div v-if="extensionType==1">
        <div class="modal-title">
        <div>
          1.机构可以为此表单添加跟进人，添加跟进人后，会生成此专属招生二维码。家长扫码在表单内
          录入信息后，此线索管理的“跟进人”会默认为此二维码所属的跟进人（销售）。
        </div>
        <div>
          2.机构可以在下方统一下载二维码分配给老师，对于有 “添加线索”权限的账号，可进入【线索管
          理-我的线索】自行下载采单二维码。
        </div>
        <div>3.若移除表单的跟进人，则他的专属二维码将失效，但不影响他已经获取的线索。</div>
      </div>
      <div class="mt16">
        <a-button style="margin-right: 10px" @click="addUser">添加跟进人</a-button>
        <a-button @click="manyDownload">批量下载二维码</a-button>
      </div>
      <div class="mt16 promote-list">
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="extenColumns"
          :data-source="extenData"
          style="border: 1px solid #e8e8e8"
          :pagination="false"
          :scroll="{ y: 300 }"
        >
          <span slot="action" slot-scope="text, record, index">
            <a  style="border-right: 1px solid #e8e8e8; padding-right: 5px;margin-right: 5px" @click="lookQC(record)"
              >查看</a
            >
            <a style="margin-right: 5px" @click="download(record)">下载二维码</a>
            
            <a v-if="index != 0" style="border-left: 1px solid #e8e8e8; padding-left: 5px" @click="delUser(record)"
              >移除</a
            >
          </span>
        </a-table>
      </div>
      </div>
      <div v-else class="wx-code">
        <div>微信扫码分享或下载二维码</div>
         <vue-qr :text="wxQrcode" :size="170" :margin="20" class="qrcode"></vue-qr>
         <div>
           点击复制下方链接，可通过微信发送给家长
         </div>
         <div><a class="btn_1" v-bind:data-clipboard-text="wxQrcode" @click="copy1('.btn_1')">{{wxQrcode}}</a>
         <!-- <span @click="copy1">复制</span> -->
         </div>
      </div>
    </a-modal>
    <a-modal
      title="选择跟进人"
      :visible="userVisible"
      @cancel="userVisible = false"
      :width="680"
      :confirm-loading="userConfirmLoading"
      @ok="userHandleOk"
    >
      <a-table
        :row-selection="{ selectedRowKeys: userSelectedRowKeys, onChange: onSelectUserChange }"
        :columns="userColumns"
        :data-source="userData"
        style="border: 1px solid #e8e8e8"
        :pagination="false"
        :scroll="{ y: 300 }"
      >
      </a-table>
    </a-modal>
    <!-- 采单二维码 -->
    <a-modal
      title="选择跟进人"
      :visible="QcVisible"
      @cancel="QcVisible = false"
      :width="680"
      :footer="null"
      :z-index="1005"
    > 
      <div class="wx-code">
         <div>微信扫码分享或下载二维码</div>
         <vue-qr :text="caiWxQrcode" :size="170" :margin="20" class="qrcode"></vue-qr>
         <div>
           点击复制下方链接，可通过微信发送给家长
         </div>
         <div><a class="btn_2" v-bind:data-clipboard-text="caiWxQrcode" @click="copy1('.btn_2')">{{caiWxQrcode}}</a>
         <!-- <span @click="copy1">复制</span> -->
         </div>
      </div>
    </a-modal>
    <!-- 预览 -->
     <div class="popContainer" v-if="previewVisible">
       <div class="previewContent">
         <div class="closePreview" @click="previewVisible=false">
            <a-icon type="close" style="font-size:50px" />
          </div>
          <!-- <div>
            <a-button>立即使用</a-button>
          </div> -->
          <div class="previewContent">
            <div class="previewTitle">{{templateData.title}}</div>
            <div class="previewUser">
              <img :src="templateData.imgUrl" alt="" class="preview-img">
            </div>
          </div>
       </div>
     </div>
  </div>
</template>

<script>
import {
  formsList,
  formsSetStatus,
  extensionList,
  userList,
  addFollowPerson,
  delFollowPerson,
  formsDelete,
  formsEdit,
  formsCreate,
  downQrcode,
  getTemplate,
} from '@/api/marketing'
import vueQr from 'vue-qr'
import Clipboard from 'clipboard'
export default {
  components:{vueQr},
  data() {
    return {
      QcVisible:false,
      caiWxQrcode:'',
      form_id:'',
      //预览
      previewVisible:false,
      wxQrcode:null,
      //跟进人
      userVisible: false,
      userConfirmLoading: false,
      userColumns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
      ],
      userData: [],
      userSelectedRowKeys: [],
      userSelectedRows: [],
      //推广
      extenData: [],
      extenColumns: [
        {
          title: '姓名',
          dataIndex: 'user_name',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],
      selectedRowKeys: [],
      selectedRows: [],
      extensionVisible: false,
      //
      saleVisible: false,
      activeVisible: false,
      investigationVisible: false,
      blankVisible: false,
      blankConfirmLoading: false,
      formName: '',
      type: undefined,
      nowPage: 1,
      activeList: [],
      pagination: undefined,
      loading: false,
      searchParams: {
        name: undefined,
        type: undefined,
        status: undefined,
      },
      listId: undefined,
      extensionType:undefined,
      hostUrl: null,
      templateData:{}
    }
  },
  watch: {
    searchParams: {
      handler(newVal, oldVal) {
        if (this.searchParams.name == '') {
          this.searchParams.name = undefined
        }
        this.getFormList()
      },
      deep: true,
    },
  },
  created() {
    let ishttps = 'https:' == document.location.protocol ? true : false
    if (ishttps) {
      this.hostUrl = 'https://' + window.location.host
    } else {
      this.hostUrl = 'http://' + window.location.host
    }
    // console.log(this.hostUrl);
    this.getFormList()
  },
  methods: {
     lookQC(data){
       this.caiWxQrcode=this.hostUrl +'/h5/#/pages/eform/eform?fromId='+this.listId+'&fromExtensionId='+data.id+'&user_id='+data.user_id
      this.QcVisible=true
    },
    //复制二维码链接
    copy1(className) {
      let clipboard = new Clipboard(className)
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        clipboard.destroy()
      })
    },
    lookPreview(type,temType){
       getTemplate({ type: type }).then(res=>{
          if(type==1){
            if(temType==1){
              this.templateData.title=res.audition_class.name
              this.templateData.imgUrl=require('@/assets/img/form/shiting.png')
            }
            if (temType == 2) {
              this.templateData.title=res.opening_activity.name
              this.templateData.imgUrl=require('@/assets/img/form/kaiye.png')
            }
          }
          if(type==2){
            if(temType==1){
              this.templateData.title=res.anniversary_party.name
              this.templateData.imgUrl=require('@/assets/img/form/zhounian.png')
            }
            if (temType == 2) {
              this.templateData.title=res.festival_activities.name
              this.templateData.imgUrl=require('@/assets/img/form/jieri.png')
            }
          }
          if(type==3){
            if(temType==1){
              this.templateData.title=res.course_satisfaction.name
              this.templateData.imgUrl=require('@/assets/img/form/kecheng.png')
            }
            if (temType == 2) {
              this.templateData.title=res.student_info.name
              this.templateData.imgUrl=require('@/assets/img/form/xueyuan.png')
            }
          }
          this.previewVisible=true
       }).catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    getAudition(type, temType) {
      getTemplate({ type: type })
        .then((res) => {
          let obj = {}
          //销售采单
          if (type == 1) {
            //试听课预约
            if (temType == 1) {
              obj = res.audition_class
            }
            if (temType == 2) {
              obj = res.opening_activity
            }
            
          }
          //课后报名活动
          if(type==2){
            if (temType == 1) {
              obj = res.anniversary_party
              console.log(obj)
            }
            if (temType == 2) {
              obj = res.festival_activities
            }
          }
          //问卷调查
          if(type==3){
            if (temType == 1) {
              obj = res.course_satisfaction
              console.log(obj)
            }
            if (temType == 2) {
              obj = res.student_info
            }
          }
          this.$router.push({
              name: 'custom',
              query: {
                templateContent: JSON.stringify(obj),
                type:type
              },
            })
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      console.log(selectedRows, '111')
    },
    onSelectUserChange(selectedRowKeys, selectedRows) {
      this.userSelectedRowKeys = selectedRowKeys
      this.userSelectedRows = selectedRows
      console.log(selectedRows, '222')
    },
    addUser() {
      this.userSelectedRows = []
      this.userSelectedRowKeys = []
      userList({ school_id: this.$store.state.user.school, pageSize: 999999 })
        .then((res) => {
          this.userData = res.data
          this.userVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    delUser(data) {
      let that = this
      this.$confirm({
        title: '移除跟进人',
        content: '移除后，此跟进人的专属二维码将失效',
        onOk() {
          delFollowPerson(data.id).then((res) => {
            that.$message.success('移除成功！')
            that.openExten()
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
   
    // base64转Blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // base64转downloadfile
    dataURLtoDownload(dataurl, name) {
      let blob = this.dataURLtoBlob(dataurl)
      let url = URL.createObjectURL(blob)
      let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
      save_link.href = url
      save_link.download = name
      save_link.click()
    },

    download(data) {
      downQrcode({ school_id: this.$store.state.user.school, ids: [data.id] })
        .then((res) => {
          this.dataURLtoDownload(res.qrcode_url, data.user_name + '.png')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '下载失败')
        })
    },
    manyDownload() {
      console.log(this.selectedRows)
      if (this.selectedRows.length == 1) {
        downQrcode({ school_id: this.$store.state.user.school, ids: [this.selectedRows[0].id] })
          .then((res) => {
            this.dataURLtoDownload(res.qrcode_url, this.selectedRows[0].user_name + '.png')
          })
          .catch((err) => {
            this.$message.error(err.data.message || '下载失败')
          })
      }
      if (this.selectedRows.length > 1) {
        let ids = []
        this.selectedRows.forEach((item) => {
          ids.push(item.id)
        })
        downQrcode({ school_id: this.$store.state.user.school, ids: ids })
          .then((res) => {
            window.location.href = res.zip_file
          })
          .catch((err) => {
            this.$message.error(err.data.message || '下载失败')
          })
      }
    },
    userHandleOk() {
      this.userConfirmLoading = true
      let data = []
      // console.log(this.userSelectedRows);
      this.userSelectedRows.forEach((item) => {
        if (this.extenData.length > 0) {
          this.extenData.forEach((val) => {
            if (item.id != val.user_id) {
              data.push(item.id)
            }
          })
        }else{
          data.push(item.id)
        }
      })
      addFollowPerson(this.listId, { user_ids: data })
        .then((res) => {
          this.$message.success('添加成功！')
          this.userVisible = false
          this.userConfirmLoading = false
          this.openExten()
        })
        .catch((err) => {
          this.userConfirmLoading = false
          this.$message.error(err.data.message || '添加失败')
        })
    },
    openExten(data = undefined) {
      if (data) {
        this.extensionType=data.type
        if(data.type!=1){
          this.wxQrcode=this.hostUrl +'/h5/#/pages/eform/eform?fromId='+data.id
        }
        this.listId = data.id
        this.loading = true
      }
      extensionList(this.listId)
        .then((res) => {
          this.extenData = res.data
          this.extensionVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    //删除
    delteItem(data) {
      let that = this
      this.$confirm({
        title: '删除表单',
        content: '确定删除此表单吗?',
        onOk() {
          formsDelete(data.id)
            .then((res) => {
              that.$message.success('删除成功！')
              that.getFormList()
            })
            .catch((err) => {
              that.$message.error(err.data.message || '删除失败！')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
    //复制
    copyList(data) {
      let that = this
      let parmars = {}
      let str = '[新]'
      this.$confirm({
        title: '复制表单',
        content: (h) => (
          <div>
            <div>包括：表单字段设置</div>
            <div>不包括：报名数据、推广相关的二维码/链接等</div>
          </div>
        ),
        onOk() {
          formsEdit(data.id)
            .then((res) => {
              parmars.type = res.type
              parmars.template_content = res.template_content
              parmars.school_id = that.$store.state.user.school
              parmars.name = str.concat(res.name)
              formsCreate(parmars)
                .then((val) => {
                  that.$message.success('复制成功')
                  that.getFormList()
                })
                .catch((errs) => {
                  this.$message.error('复制失败')
                })
            })
            .catch((err) => {
              that.$message.error(err.data.message || '获取失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
    //发布活动
    release(id, type) {
      let that = this
      this.$confirm({
        title: type == 2 ? '发布表单' : '转为失效',
        content: type == 2 ? '发布后，表单正式生效' : '转为失效后，此表单将不能填写',
        onOk() {
          formsSetStatus(id, { status: type }).then((res) => {
            if (type == 2) {
              that.$message.success('发布成功!')
            }
            if (type == 3) {
              that.$message.success('表单已转为失效!')
            }
            that.getFormList()
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
    getFormList(pageNo = 1, pageSize = 10) {
      this.loading = true
      formsList(
        Object.assign(
          { school_id: this.$store.state.user.school, pageNo: pageNo, pageSize: pageSize },
          this.searchParams
        )
      )
        .then((res) => {
          this.activeList = res.data
          this.pagination = res.meta.pagination
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    changePages(page, pageSize) {
      this.getFormList(page, pageSize)
    },
    create(type) {
      if (type == 1) {
        this.saleVisible = false
      }
      if (type == 2) {
        this.activeVisible = false
      }
      if (type == 3) {
        this.investigationVisible = false
      }

      this.blankVisible = true
      this.type = type
    },
    createBlank() {
      if (this.formName == '') {
        this.$message.warning('请输入表单名称')
        return
      }
      this.$router.push({
        name: 'custom',
        query: {
          title: this.formName,
          type: this.type,
        },
      })
    },
    clickEdit(id) {
      this.$router.push({
        name: 'custom',
        query: {
          id: id,
        },
      })
    },
    lookData(data) {
      this.$router.push({
        name: 'dataInfo',
        query: {
          id: data.id,
          type: data.type,
          title: data.name,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';
// @import 'at.alicdn.com/t/font_8d5l8fzk5b87iudi.css';
// @import url(https://at.alicdn.com/t/font_2015640_yxpztcu6ee.css);
.mb20 {
  margin-bottom: 20px;
}
.mr16 {
  margin-right: 16px;
}
.ml16 {
  margin-left: 16px;
}
.mt16 {
  margin-top: 16px;
}
.gradient-one {
  background: linear-gradient(90deg, rgb(58, 207, 190) 0%, rgb(17, 155, 210) 100%);
}
.gradient-two {
  background: linear-gradient(90deg, rgb(255, 133, 91) 0%, rgb(254, 107, 165) 100%);
}
.gradient-three {
  background: linear-gradient(90deg, rgb(238, 111, 233) 0%, rgb(131, 99, 249) 100%);
}
.bg-img-one {
  background-image: url('~@/assets/img/sale-form.png');
}
.bg-img-two {
  background-image: url('~@/assets/img/after-active.png');
}
.bg-img-three {
  background-image: url('~@/assets/img/investigation.png');
}
.head {
  display: flex;
  .saleOrder {
    box-sizing: border-box;
    width: 252px;
    height: 180px;
    border-radius: 6px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    padding: 24px 0 0 24px;
    position: relative;
    .title-content {
      display: flex;
      align-items: center;
      .title {
        height: 33px;
        line-height: 33px;
        font-size: 24px;
        color: #fff;
        font-weight: 500;
      }
      .more {
        width: 64px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        font-size: 12px;
        background: hsla(0, 0%, 100%, 0.5);
        border-radius: 11px;
        color: #fff;
        margin-left: 8px;
        cursor: pointer;
      }
    }
    .sub-title {
      .explain {
        color: #fff;
        font-size: 12px;
        margin-right: 5px;
      }
    }
    .create-form {
      .create-btn {
        width: 80px;
        height: 28px;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        color: #ff7519;
        line-height: 22px;
        text-align: center;
        display: inline-block;
        margin-top: 40px;
        padding-top: 2px;
        cursor: pointer;
      }
      .create-icon {
        width: 116px;
        height: 82px;
        margin-left: 32px;
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        background-size: cover;
      }
    }
  }
  .more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 180px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    background: #fff;
  }
}
.eform-template-box {
  display: flex;
  justify-content: space-around;
  .left-block {
    text-align: center;
    .left-box {
      width: 180px;
      height: 220px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #e8e8e8;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .create-text {
      margin-top: 16px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      line-height: 20px;
    }
  }
  .right-block {
    text-align: center;
    .right-box {
      position: relative;
      width: 180px;
      height: 220px;
      border-radius: 4px;
      border: 1px solid #e8e8e8;
      box-sizing: border-box;
      &:hover .Mantle {
        display: block;
      }
      .Mantle {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background: rgba(51, 51, 51, 0.7);
        width: 180px;
        height: 220px;
        border-radius: 4px;
      }
    }
    .template-text {
      margin-top: 16px;
    }
  }
}
.form-box {
  display: flex;
  align-items: center;
}
.form-list {
  .form-item {
    height: 133px;
    background: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 16px 16px 0;
    .one-part {
      display: flex;
      justify-content: space-between;
      .eform-title {
        display: flex;
        align-items: center;
        .eform-title-show {
          height: 22px;
          line-height: 22px;
          max-width: 800px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }
      }

      .eform-operate {
        span {
          color: #bfbfbf;
        }
      }
    }
    .two-part {
      display: flex;

      .left-box {
        div {
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #999;
          line-height: 20px;
        }
      }
      .right-box {
        flex: 1;
        margin-left: 100px;
        .data {
          display: flex;
          margin-top: 13px;
          width: calc(100% - 150px);
          border-left: 2px solid #e8e8e8;
          .data-total {
            flex: 1;
            text-align: center;
            .count {
              margin-bottom: 13px;
              font-size: 18px;
              font-weight: 500;
              color: #999;
            }
            .text {
              font-weight: 400;
              color: #999;
            }
            .icon {
              margin-bottom: 13px;
            }
          }
        }
      }
    }
  }
}
.modal-title {
  background: #f4f6fa;
  color: #999;
  font-size: 14px;
  font-weight: 400;
  padding: 16px;
  width: 632px;
}
.promote-list {
  height: 291px;
}
.wx-code{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.3);
  .previewContent {
    background: url('~@/assets/messageBgImg.png') center center no-repeat;
    background-size: 90% 90%;
    width: 350px;
    height: 700px;
    position: relative;
    top: 10%;
    margin: 0 auto;
    .previewContent {
      background: #fff;
      width: 268px;
      height: 473px;
      border-radius: 1%;
      position: absolute;
      left: 2px;
      right: 0;
      top: 114px;
      overflow-x: hidden;
      padding: 0 10px;
      overflow-y: auto;
      .previewTitle {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 900;
      }
      .previewUser {
        margin: 5px 0;
        .previewSchoolName {
          font-weight: 900;
          margin-bottom: 8px;
        }
      }
      .previewDividing {
        height: 1px;
        margin-bottom: 20px;
        background-color: #e8e8e8;
      }
      .previewDesc {
        margin-top: 5px;
        font-size: 12px;
        color: #b0b0b0;
      }
    }
    .closePreview {
      color: white;
      right: -50px;
      position: absolute;
      top: 20px;
      cursor: pointer;
    }
  }
}
.preview-img{
  width: 246px;
}
</style>